<template>
  <div class="bom-list">
    <h1>列表界面</h1>
    <van-field v-model="dataList.length" readonly center label="数据条数:" center>
      {{dataList.length}}
      <template #button>
        <van-button icon="delete-o" size="small" type="primary" @click="deleteAllList()">一键清空</van-button>
      </template>
    </van-field>
    <!-- <van-button type="danger" @click="deleteAllList()">一键清空</van-button> -->


    <!-- <van-row gutter="20">
      <van-col span="12">
        <van-swipe-cell>
          <van-card
            num="2"
            price="2.00"
            desc="描述信息"
            title="商品标题"
            class="goods-card"
            thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" />
          </template>
        </van-swipe-cell>
      </van-col>
      <van-col span="12">
        <van-swipe-cell>
          <van-card
            num="2"
            price="2.00"
            desc="描述信息"
            title="商品标题"
            class="goods-card"
            thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" />
          </template>
        </van-swipe-cell>
      </van-col>
    </van-row> -->


    <!-- <van-swipe-cell v-for="(bomData,index) in dataList" :key="bomData.ID" style="margin-bottom: 10px;" :before-close="beforeClose">
      <van-cell-group border inset style="border: 2px solid #ccc;">
        <van-cell title="工号" :value="bomData.LACODSEQ" />
        <van-cell title="零件图号" :value="bomData.TY" />
        <van-cell title="零件名称" :value="bomData.REQUIRES" />
        <van-cell title="工序号" :value="bomData.JYBZ" />
        <van-cell title="单件号" :value="bomData.SYMBOL" />
      </van-cell-group>

      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" />
      </template>
    </van-swipe-cell> -->

    <van-row>
      <van-col span="4">
        <van-cell value="工号" />
      </van-col>
      <van-col span="4">
        <van-cell value="零件图号" />
      </van-col>
      <van-col span="4">
        <van-cell value="零件名称" />
      </van-col>
      <van-col span="4">
        <van-cell value="工序号/工序名称" />
      </van-col>
      <van-col span="4">
        <van-cell value="单件号" />
      </van-col>
      <van-col span="4">
        <van-cell value="暂存时间" />
      </van-col>
    </van-row>

    <van-swipe-cell v-for="(bomData,index) in dataList" :key="bomData.timeId" style="margin-bottom: 10px;">
      <van-cell-group border inset style="border: 2px solid #ccc;" inset @click="toTable(bomData.timeId,index)">
        <!-- <van-cell title="工号" :value="bomData.LACODSEQ" />
        <van-cell title="零件图号" :value="bomData.TY" />
        <van-cell title="零件名称" :value="bomData.REQUIRES" />
        <van-cell title="工序号" :value="bomData.JYBZ" />
        <van-cell title="单件号" :value="bomData.SYMBOL" />
        <van-cell title="暂存起始时间" :value="bomData.timeId" /> -->

        <van-row>
          <van-col span="4">
            <van-cell :value="bomData.LACODSEQ" />
          </van-col>
          <van-col span="4">
            <van-cell :value="bomData.TY" />
          </van-col>
          <van-col span="4">
            <van-cell :value="bomData.REQUIRES" />
          </van-col>
          <van-col span="4">
            <van-cell :value="bomData.JYBZ" />
          </van-col>
          <van-col span="4">
            <van-cell :value="bomData.SYMBOL" />
          </van-col>
          <van-col span="4">
            <van-cell :value="bomData.timeId" />
          </van-col>
        </van-row>
      </van-cell-group>

      <!-- <van-cell title="单元格" value="内容3" /> -->
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button"
                    @click="delBtnClick(index,bomData.timeId)" />
      </template>
    </van-swipe-cell>

    <!--展示底部数据-->
    <van-list
        v-model="loading"
        :finished="finished"
        finished-text=""
        @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item" :title="item" :border="false" />
    </van-list>

  </div>
</template>

<script>
export default {
  name: "bomList",
  // components:[
  // 	BomCard
  // ],
  data() {
    return {
      list: [],
      loading: false,
      finished: false,

      dataList: []
      // dataList: [{
      // 		"timeId":"",//本次存储的唯一标识
      // 		"LACODSEQ": "燃25-5", //工号
      // 		"TY": "510-0717", //零件图号
      // 		"REQUIRES": "引熄弧板", //零件名称
      // 		"SYMBOL": "20", //单件号
      // 		"JYBZ": "P1102402" //工序号/工序名称
      // 	}]
    }
  },
  mounted() {
    var bomList = JSON.parse(localStorage.getItem('bomList'));
    this.dataList = bomList;
    if (bomList === null || bomList.length === 0) {
      this.$toast({
        message: '暂无数据！',
        duration: 1000
      });
    }
  },
  // watch:{
  // 	dataList:function(){

  // 	}
  // },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1);
      //   }
      //
      //   // 加载状态结束
      //   this.loading = false;
      //
      //   // 数据全部加载完成
      //   if (this.list.length >= this.dataList.length) {
      //     this.finished = true;
      //   }
      // }, 1000);
      this.list.push("提示：左滑可删除");
      for (let i = 0; i < 2; i++) {
        this.list.push("");
      }
      // 加载状态结束
      this.loading = false;
      // this.finished = true;
      // 数据全部加载完成  this.dataList.length
      if (this.list.length >= 2) {
        this.finished = true;
      }
    },

    delBtnClick(index, timeId) {
      this.$dialog.confirm({
        message: '确定删除吗？',
      }).then(() => {
        this.dataList.splice(index, 1);
        let bomList = this.dataList;
        localStorage.setItem('bomList', JSON.stringify(bomList));
        localStorage.removeItem(timeId);
      });
    },
    deleteAllList() {
      this.$dialog.confirm({
        title: '删除提示！',
        message: '您确定要删除所有的暂存记录？',
      })
          .then(() => {
            // on confirm
            this.dataList.forEach(item => {
              localStorage.removeItem(item.timeId);
            })
            localStorage.removeItem('bomList');
            this.dataList = [];
          })
          .catch(() => {
            // on cancel
            return;
          });
    },
    toTable(timeId, index) {
      // console.log(`timeId:${timeId}`);
      // console.log(`index:${index}`);
      this.$router.push({
        name: 'table',
        params: {
          "timeId": timeId,
          "index": index
        }
      });
    },
  }
}
</script>
<style scoped>
/*.goods-card {*/
/*  margin: 0;*/
/*  background-color: @white;*/
/*}*/

.delete-button {
  height: 100%;
}

.card-content {
  width: auto;
  height: inherit;
  background-color: #49f05d;
}
</style>
